<template>

  <div v-title data-title="blog-weiwei">

    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt=""/>
    </div>
    <el-container>
      <div class="card">
        <!--展示名片头部--头像名称-->
        <div class="card-header">
          <img :size="60" src="/static/img/dlam2.jpg" width="70px" align="center"></img>
          <p style="padding: 15px" class="hcqStyle3">{{hobby.name}}</p>
          <el-divider></el-divider>
        </div>
        <!--卡片中部--github地址-->
        <div class="card-middle" align="center">
          <img src="https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting//website/static/githubLogo.webp"
               @click="goToGithub" width="50px"></img>
        </div>
        <!--卡片底部--个人喜好-->
        <div class="card-footer">
          <el-collapse>
            <el-collapse-item name="1" style="padding-left: 20px;padding-right: 20px" title="最喜欢的动漫">
              <div><span class="hcqStyle2">{{hobby.catoon}}</span></div>
            </el-collapse-item>
            <el-collapse-item name="2" style="padding-left: 20px;padding-right: 20px" title="最喜欢的女孩子">
              <div><span class="hcqStyle2">{{hobby.girl}}</span></div>
            </el-collapse-item>
            <el-collapse-item name="3" style="padding-left: 20px;padding-right: 20px" title="最喜欢的游戏">
              <div><span class="hcqStyle2">{{hobby.game}}</span></div>
            </el-collapse-item>
            <el-collapse-item name="4" style="padding-left: 20px;padding-right: 20px" title="最喜欢的颜色">
              <div><span class="hcqStyle2">{{hobby.color}}</span></div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <el-container>
        <el-main class="me-articles">
          <article-scroll-page></article-scroll-page>
        </el-main>

        <el-aside>

          <card-me class="me-area"></card-me>
          <card-tag :tags="hotTags"></card-tag>

          <card-article cardHeader="最热文章" :articles="hotArticles"></card-article>

          <card-archive cardHeader="文章归档" :archives="archives"></card-archive>

          <card-article cardHeader="最新文章" :articles="newArticles"></card-article>

        </el-aside>

      </el-container>
    </el-container>
  </div>

</template>

<script>
  import CardMe from '@/components/card/CardMe'
  import CardArticle from '@/components/card/CardArticle'
  import CardArchive from '@/components/card/CardArchive'
  import CardTag from '@/components/card/CardTag'
  import ArticleScrollPage from '@/views/common/ArticleScrollPage'
  import {getToken, getUserName} from '@/request/token'
  import {getArticles, getHotArtices, getNewArtices, getHobby} from '@/api/article'
  import {getHotTags} from '@/api/tag'
  import {listArchives} from '@/api/article'
  import {Message} from "element-ui";

  export default {
    name: 'Index',
    inject: ['reload'],
    created() {
      this.getCurrentHobby();
      this.getHotArtices()
      this.getNewArtices()
      this.getHotTags()
      this.listArchives()
    },
    data() {
      return {
        hobby: {
          name: '登录后,请进行设置~~~',
          catoon: '登录后,请进行设置~~~',
          game: '登录后,请进行设置~~~',
          girl: '登录后,请进行设置~~~',
          color: '登录后,请进行设置~~~',
        },
        hasLogin: false,
        fit: 'fill',
        hotTags: [],
        hotArticles: [],
        newArticles: [],
        archives: [],
        imgSrc: '/static/img/first87.png'

      }
    },
    methods: {

      getCurrentHobby() {
        if (typeof (getToken()) == "undefined") {
          return
        } else {
          let token = getToken();
          getHobby(token).then(resp => {
            if(resp.success){
              this.hobby=resp.data;
            }
          })
        }
      },
      goToGithub() {
        window.location.href = "https://gitee.com/uiyuiyuiyu/projects"
      },
      getHotArtices() {

        getHotArtices().then(data => {
          this.hotArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            this.$message({type: 'error', message: '最热文章加载失败!', showClose: true})
          }

        })

      },
      getNewArtices() {

        getNewArtices().then(data => {
          this.newArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            this.$message({type: 'error', message: '最新文章加载失败!', showClose: true})
          }

        })

      },
      getHotTags() {
        getHotTags().then(data => {
          this.hotTags = data.data
        }).catch(error => {
          if (error !== 'error') {
            this.$message({type: 'error', message: '最热标签加载失败!', showClose: true})
          }

        })
      },
      listArchives() {
        listArchives().then(data => {
          this.archives = data.data
        }).catch(error => {
          if (error !== 'error') {
            this.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
          }

        })
      }

    },
    components: {
      'card-me': CardMe,
      'card-article': CardArticle,
      'card-tag': CardTag,
      ArticleScrollPage,
      CardArchive
    }
  }
</script>

<style scoped>

  .background {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /**宽高100%是为了图片铺满屏幕 */
    z-index: -1;
    position: absolute;

  }


  .el-container {
    width: 1300px;

  }

  .el-aside {
    margin-left: 20px;
    width: 400px;
  }

  .el-main {
    padding: 0px;
    line-height: 16px;
  }

  .el-card {
    border-radius: 0;
  }

  .el-card:not(:first-child) {
    margin-top: 20px;
  }

  .card {
    width: 300px;
    padding: 20px 0px 0px 0px;
    background-color: white;
    position: relative;
    right: 50px;
    font-size: 8px;
    height: 550px;
  }

  .card-header {
    text-align: center;
  }

  .card-footer {
    margin-top: 10px;
    font-size: 10px;
  }

  .card:hover {
    -webkit-box-shadow: #ccc 0px 10px 10px;
    -moz-box-shadow: #ccc 0px 10px 10px;
    box-shadow: #ccc 0px 10px 10px;
  }

  .hcqStyle2 {
    display: inline-block;
    font-weight: bold;
    color: #def;
    text-shadow: 0 0 1px currentColor, -1px -1px 1px #000, 0 -1px 1px #000, 1px -1px 1px #000, 1px 0 1px #000, 1px 1px 1px #000, 0 1px 1px #000, -1px 1px 1px #000, -1px 0 1px #000;
    -webkit-filter: url(#diff1);
    margin-left: 20px;
    filter: url(#diff1); /*background:#def;padding:0 .2em*/
  }
  .hcqStyle3 {
    font-weight: bold;
    color: #def;
    text-shadow: 0 0 1px currentColor, -1px -1px 1px #000, 0 -1px 1px #000, 1px -1px 1px #000, 1px 0 1px #000, 1px 1px 1px #000, 0 1px 1px #000, -1px 1px 1px #000, -1px 0 1px #000;
    -webkit-filter: url(#diff1);
    filter: url(#diff1); /*background:#def;padding:0 .2em*/
  }

</style>
